<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>盒子模型示例</title>
    <style>
        .box {
            width: 200px;              /* 内容区域宽度 */
            padding: 20px;             /* 内边距 */
            border: 5px solid blue;    /* 边框 */
            margin: 30px;              /* 外边距 */
            background-color: lightyellow;
            font-family: "微软雅黑", sans-serif;
            /* 标准盒子模型：总宽度 = width + padding + border */
            box-sizing: content-box;
        }
        
        /* IE盒子模型示例 */
        .box-ie {
            box-sizing: border-box; /* 总宽度 = width (包含padding和border) */
        }
    </style>
</head>
<body>
    <div class="box">这是一个CSS盒子模型示例。</div>
</body>
</html>